<template>
  <div class="page-indicator">
    <div 
      v-for="(category, index) in categories" 
      :key="category.id"
      class="indicator-dot"
      :class="{ active: currentIndex === index }"
      @click="scrollToCategory(index)"
      @mouseenter="showTooltip(index)"
      @mouseleave="hideTooltip"
    >
      <div class="tooltip" :class="{ visible: tooltipIndex === index }">
        {{ category.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps<{
  categories: Array<{
    id: number
    title: string
  }>
}>()

const currentIndex = ref(0)
const tooltipIndex = ref(-1)

const showTooltip = (index: number) => {
  tooltipIndex.value = index
}

const hideTooltip = () => {
  tooltipIndex.value = -1
}

const scrollToCategory = (index: number) => {
  const element = document.getElementById(`category-${index}`)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
    currentIndex.value = index
  }
}

// 监听滚动，更新当前位置
const updateCurrentIndex = () => {
  const categories = props.categories.map((_, index) => 
    document.getElementById(`category-${index}`))
  
  const scrollPosition = window.scrollY + window.innerHeight / 2

  for (let i = categories.length - 1; i >= 0; i--) {
    const element = categories[i]
    if (element && element.offsetTop <= scrollPosition) {
      currentIndex.value = i
      break
    }
  }
}

onMounted(() => {
  window.addEventListener('scroll', updateCurrentIndex)
})

onUnmounted(() => {
  window.removeEventListener('scroll', updateCurrentIndex)
})
</script>

<style scoped>
.page-indicator {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.indicator-dot:hover,
.indicator-dot.active {
  background-color: #007bff;
  transform: scale(1.2);
}

.tooltip {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.tooltip::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 4px solid rgba(0, 0, 0, 0.8);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
</style> 